<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="iconfont icon-home nav-icon"></i>
                </el-breadcrumb-item>
                <el-breadcrumb-item>自定义图标</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="article markdown">
                <p>使用步骤如下：</p>
                <div id="-fontclass-">
                    第一步：引入项目下面生成的 fontclass 代码：
                    <code
                        class="language-html"
                    >&lt;link rel="stylesheet" href="./iconfont.css"&gt;</code>
                </div>
                <div id="-">
                    第二步：挑选相应图标并获取类名，应用于页面：
                    <code
                        class="language-html"
                    >&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;</code>
                </div>
                <blockquote>
                    <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
                </blockquote>
            </div>
            <div>
                <ul class="icon_lists dib-box">
                    <li class="dib">
                        <span class="icon iconfont icon-home1"></span>
                        <div class="name">home</div>
                        <div class="code-name">.icon-home1</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-home2"></span>
                        <div class="name">home</div>
                        <div class="code-name">.icon-home2</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-404"></span>
                        <div class="name">404</div>
                        <div class="code-name">.icon-404</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-500px"></span>
                        <div class="name">500px</div>
                        <div class="code-name">.icon-500px</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-home3"></span>
                        <div class="name">home</div>
                        <div class="code-name">.icon-home3</div>
                    </li>
                    <li class="dib">
                        <span class="icon iconfont icon-icon-test62"></span>
                        <div class="name">403</div>
                        <div class="code-name">.icon-icon-test62</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test63"></span>
                        <div class="name">404</div>
                        <div class="code-name">.icon-icon-test63</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test64"></span>
                        <div class="name">500</div>
                        <div class="code-name">.icon-icon-test64</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test65"></span>
                        <div class="name">404</div>
                        <div class="code-name">.icon-icon-test65</div>
                    </li>
                    <li class="dib">
                        <span class="icon iconfont icon-qrcode"></span>
                        <div class="name">qrcode</div>
                        <div class="code-name">.icon-qrcode</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-scan"></span>
                        <div class="name">scan</div>
                        <div class="code-name">.icon-scan</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-cut"></span>
                        <div class="name">cut</div>
                        <div class="code-name">.icon-cut</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-gift"></span>
                        <div class="name">gift</div>
                        <div class="code-name">.icon-gift</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-link"></span>
                        <div class="name">link</div>
                        <div class="code-name">.icon-link</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-poweroff"></span>
                        <div class="name">poweroff</div>
                        <div class="code-name">.icon-poweroff</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-key"></span>
                        <div class="name">key</div>
                        <div class="code-name">.icon-key</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-safety-certificate"></span>
                        <div class="name">safety-certificate</div>
                        <div class="code-name">.icon-safety-certificate</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-supervise"></span>
                        <div class="name">supervise</div>
                        <div class="code-name">.icon-supervise</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-chart-pie-alt"></span>
                        <div class="name">chart-pie-alt</div>
                        <div class="code-name">.icon-chart-pie-alt</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-chart-relation"></span>
                        <div class="name">chart-relation</div>
                        <div class="code-name">.icon-chart-relation</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-chart-scatter-plot"></span>
                        <div class="name">chart-scatter-plot</div>
                        <div class="code-name">.icon-chart-scatter-plot</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-chart-area"></span>
                        <div class="name">chart-area</div>
                        <div class="code-name">.icon-chart-area</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-chart-line"></span>
                        <div class="name">chart-line</div>
                        <div class="code-name">.icon-chart-line</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-chart-bar"></span>
                        <div class="name">chart-bar</div>
                        <div class="code-name">.icon-chart-bar</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-laptop-error"></span>
                        <div class="name">laptop-error</div>
                        <div class="code-name">.icon-laptop-error</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-laptop-check"></span>
                        <div class="name">laptop-check</div>
                        <div class="code-name">.icon-laptop-check</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-laptop"></span>
                        <div class="name">laptop</div>
                        <div class="code-name">.icon-laptop</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-mobile-error"></span>
                        <div class="name">mobile-error</div>
                        <div class="code-name">.icon-mobile-error</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-mobile-check"></span>
                        <div class="name">mobile-check</div>
                        <div class="code-name">.icon-mobile-check</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-mobile-alt"></span>
                        <div class="name">mobile-alt</div>
                        <div class="code-name">.icon-mobile-alt</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-edit"></span>
                        <div class="name">edit</div>
                        <div class="code-name">.icon-edit</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-dollar"></span>
                        <div class="name">dollar</div>
                        <div class="code-name">.icon-dollar</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-transanction"></span>
                        <div class="name">transanction</div>
                        <div class="code-name">.icon-transanction</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-all-fill"></span>
                        <div class="name">all-fill</div>
                        <div class="code-name">.icon-all-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-commentlines-fill"></span>
                        <div class="name">comment lines-fill</div>
                        <div class="code-name">.icon-commentlines-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-commentdots-fill"></span>
                        <div class="name">comment dots-fill</div>
                        <div class="code-name">.icon-commentdots-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-paperplane-fill"></span>
                        <div class="name">paper plane-fill</div>
                        <div class="code-name">.icon-paperplane-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-eyeslash-fill"></span>
                        <div class="name">eye slash-fill</div>
                        <div class="code-name">.icon-eyeslash-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-eye-fill"></span>
                        <div class="name">eye-fill</div>
                        <div class="code-name">.icon-eye-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-tag-fill"></span>
                        <div class="name">tag-fill</div>
                        <div class="code-name">.icon-tag-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-position-fill"></span>
                        <div class="name">position-fill</div>
                        <div class="code-name">.icon-position-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-box-fill"></span>
                        <div class="name">box-fill</div>
                        <div class="code-name">.icon-box-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-databaseset-fill"></span>
                        <div class="name">database set-fill</div>
                        <div class="code-name">.icon-databaseset-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-layergroup-fill"></span>
                        <div class="name">layer group-fill</div>
                        <div class="code-name">.icon-layergroup-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-cry-fill"></span>
                        <div class="name">cry-fill</div>
                        <div class="code-name">.icon-cry-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-smile-fill"></span>
                        <div class="name">smile-fill</div>
                        <div class="code-name">.icon-smile-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-unlock-fill"></span>
                        <div class="name">unlock-fill</div>
                        <div class="code-name">.icon-unlock-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-lock-fill"></span>
                        <div class="name">lock-fill</div>
                        <div class="code-name">.icon-lock-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-folderopen-fill"></span>
                        <div class="name">folder open-fill</div>
                        <div class="code-name">.icon-folderopen-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-folderplus-fill"></span>
                        <div class="name">folder plus-fill</div>
                        <div class="code-name">.icon-folderplus-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-folder-fill"></span>
                        <div class="name">folder-fill</div>
                        <div class="code-name">.icon-folder-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-fileplus-fill"></span>
                        <div class="name">file plus-fill</div>
                        <div class="code-name">.icon-fileplus-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-file-fill"></span>
                        <div class="name">file-fill</div>
                        <div class="code-name">.icon-file-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-copy-fill"></span>
                        <div class="name">copy-fill</div>
                        <div class="code-name">.icon-copy-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-delete-fill"></span>
                        <div class="name">delete-fill</div>
                        <div class="code-name">.icon-delete-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-picture-fill"></span>
                        <div class="name">picture-fill</div>
                        <div class="code-name">.icon-picture-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-mail-fill"></span>
                        <div class="name">mail-fill</div>
                        <div class="code-name">.icon-mail-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-heart-fill"></span>
                        <div class="name">heart-fill</div>
                        <div class="code-name">.icon-heart-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-collection-fill"></span>
                        <div class="name">collection-fill</div>
                        <div class="code-name">.icon-collection-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-user-group-fill"></span>
                        <div class="name">user-group-fill</div>
                        <div class="code-name">.icon-user-group-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-userplus-fill"></span>
                        <div class="name">user plus-fill</div>
                        <div class="code-name">.icon-userplus-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-user-fill"></span>
                        <div class="name">user-fill</div>
                        <div class="code-name">.icon-user-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-cog-fill"></span>
                        <div class="name">cog-fill</div>
                        <div class="code-name">.icon-cog-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-clock-fill"></span>
                        <div class="name">clock-fill</div>
                        <div class="code-name">.icon-clock-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-info-circle-fill"></span>
                        <div class="name">info-circle-fill</div>
                        <div class="code-name">.icon-info-circle-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-question-circle-fill"></span>
                        <div class="name">question-circle-fill</div>
                        <div class="code-name">.icon-question-circle-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-exclamationcircle-f"></span>
                        <div class="name">exclamation circle-f</div>
                        <div class="code-name">.icon-exclamationcircle-f</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-minus-circle-fill"></span>
                        <div class="name">minus-circle-fill</div>
                        <div class="code-name">.icon-minus-circle-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-plus-circle-fill"></span>
                        <div class="name">plus-circle-fill</div>
                        <div class="code-name">.icon-plus-circle-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-times-circle-fill"></span>
                        <div class="name">times-circle-fill</div>
                        <div class="code-name">.icon-times-circle-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-check-circle-fill"></span>
                        <div class="name">check-circle-fill</div>
                        <div class="code-name">.icon-check-circle-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-compressalt-fill"></span>
                        <div class="name">compress alt-fill</div>
                        <div class="code-name">.icon-compressalt-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-expandalt-fill"></span>
                        <div class="name">expand alt-fill</div>
                        <div class="code-name">.icon-expandalt-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-all"></span>
                        <div class="name">all</div>
                        <div class="code-name">.icon-all</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-comment-lines"></span>
                        <div class="name">comment-lines</div>
                        <div class="code-name">.icon-comment-lines</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-comment-dots"></span>
                        <div class="name">comment-dots</div>
                        <div class="code-name">.icon-comment-dots</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-paper-plane"></span>
                        <div class="name">paper-plane</div>
                        <div class="code-name">.icon-paper-plane</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-eye-slash"></span>
                        <div class="name">eye-slash</div>
                        <div class="code-name">.icon-eye-slash</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-eye"></span>
                        <div class="name">eye</div>
                        <div class="code-name">.icon-eye</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-tag"></span>
                        <div class="name">tag</div>
                        <div class="code-name">.icon-tag</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-position"></span>
                        <div class="name">position</div>
                        <div class="code-name">.icon-position</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-box"></span>
                        <div class="name">box</div>
                        <div class="code-name">.icon-box</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-database-set"></span>
                        <div class="name">database-set</div>
                        <div class="code-name">.icon-database-set</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-wind-cry"></span>
                        <div class="name">wind-cry</div>
                        <div class="code-name">.icon-wind-cry</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-wind-smile"></span>
                        <div class="name">wind-smile</div>
                        <div class="code-name">.icon-wind-smile</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-unlock"></span>
                        <div class="name">unlock</div>
                        <div class="code-name">.icon-unlock</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-lock"></span>
                        <div class="name">lock</div>
                        <div class="code-name">.icon-lock</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-folder-open"></span>
                        <div class="name">folder-open</div>
                        <div class="code-name">.icon-folder-open</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-folder-plus"></span>
                        <div class="name">folder-plus</div>
                        <div class="code-name">.icon-folder-plus</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-folder"></span>
                        <div class="name">folder</div>
                        <div class="code-name">.icon-folder</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-file-plus"></span>
                        <div class="name">file-plus</div>
                        <div class="code-name">.icon-file-plus</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-file"></span>
                        <div class="name">file</div>
                        <div class="code-name">.icon-file</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-copy"></span>
                        <div class="name">copy</div>
                        <div class="code-name">.icon-copy</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-delete"></span>
                        <div class="name">delete</div>
                        <div class="code-name">.icon-delete</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-picture"></span>
                        <div class="name">picture</div>
                        <div class="code-name">.icon-picture</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-mail"></span>
                        <div class="name">mail</div>
                        <div class="code-name">.icon-mail</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-like"></span>
                        <div class="name">like</div>
                        <div class="code-name">.icon-like</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-user-group"></span>
                        <div class="name">user-group</div>
                        <div class="code-name">.icon-user-group</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-account-plus"></span>
                        <div class="name">account-plus</div>
                        <div class="code-name">.icon-account-plus</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-account"></span>
                        <div class="name">account</div>
                        <div class="code-name">.icon-account</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-cog"></span>
                        <div class="name">cog</div>
                        <div class="code-name">.icon-cog</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-exchange"></span>
                        <div class="name">exchange</div>
                        <div class="code-name">.icon-exchange</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-info-circle"></span>
                        <div class="name">info-circle</div>
                        <div class="code-name">.icon-info-circle</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-question-circle"></span>
                        <div class="name">question-circle</div>
                        <div class="code-name">.icon-question-circle</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-exclamation-circle"></span>
                        <div class="name">exclamation-circle</div>
                        <div class="code-name">.icon-exclamation-circle</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-minus-circle"></span>
                        <div class="name">minus-circle</div>
                        <div class="code-name">.icon-minus-circle</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-plus-circle"></span>
                        <div class="name">plus-circle</div>
                        <div class="code-name">.icon-plus-circle</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-times-circle"></span>
                        <div class="name">times-circle</div>
                        <div class="code-name">.icon-times-circle</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-check-circle"></span>
                        <div class="name">check-circle</div>
                        <div class="code-name">.icon-check-circle</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-ban"></span>
                        <div class="name">ban</div>
                        <div class="code-name">.icon-ban</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-search"></span>
                        <div class="name">search</div>
                        <div class="code-name">.icon-search</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-paperclip"></span>
                        <div class="name">paperclip</div>
                        <div class="code-name">.icon-paperclip</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-connection"></span>
                        <div class="name">connection</div>
                        <div class="code-name">.icon-connection</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-news"></span>
                        <div class="name">news</div>
                        <div class="code-name">.icon-news</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-save"></span>
                        <div class="name">save</div>
                        <div class="code-name">.icon-save</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-star-circle"></span>
                        <div class="name">star-circle</div>
                        <div class="code-name">.icon-star-circle</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-user-circle"></span>
                        <div class="name">user-circle</div>
                        <div class="code-name">.icon-user-circle</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-cloud-machine"></span>
                        <div class="name">cloud-machine</div>
                        <div class="code-name">.icon-cloud-machine</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-terminal-fill"></span>
                        <div class="name">terminal-fill</div>
                        <div class="code-name">.icon-terminal-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-terminal"></span>
                        <div class="name">terminal</div>
                        <div class="code-name">.icon-terminal</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-resource"></span>
                        <div class="name">resource</div>
                        <div class="code-name">.icon-resource</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-rank"></span>
                        <div class="name">rank</div>
                        <div class="code-name">.icon-rank</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-share"></span>
                        <div class="name">share</div>
                        <div class="code-name">.icon-share</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-share1"></span>
                        <div class="name">share</div>
                        <div class="code-name">.icon-share1</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-arrow-sortdown-smal"></span>
                        <div class="name">arrow-sort down-small</div>
                        <div class="code-name">.icon-arrow-sortdown-smal</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-minus-square-fill"></span>
                        <div class="name">minus-square-fill</div>
                        <div class="code-name">.icon-minus-square-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-plus-square-fill"></span>
                        <div class="name">plus-square-fill</div>
                        <div class="code-name">.icon-plus-square-fill</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-minus-square"></span>
                        <div class="name">minus-square</div>
                        <div class="code-name">.icon-minus-square</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-plus-square"></span>
                        <div class="name">plus-square</div>
                        <div class="code-name">.icon-plus-square</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-shoppingcart"></span>
                        <div class="name">shopping cart</div>
                        <div class="code-name">.icon-shoppingcart</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-bell"></span>
                        <div class="name">bell</div>
                        <div class="code-name">.icon-bell</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test"></span>
                        <div class="name">view</div>
                        <div class="code-name">.icon-icon-test</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test1"></span>
                        <div class="name">view_off</div>
                        <div class="code-name">.icon-icon-test1</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test2"></span>
                        <div class="name">message</div>
                        <div class="code-name">.icon-icon-test2</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test3"></span>
                        <div class="name">message_unread</div>
                        <div class="code-name">.icon-icon-test3</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test4"></span>
                        <div class="name">record</div>
                        <div class="code-name">.icon-icon-test4</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test5"></span>
                        <div class="name">time</div>
                        <div class="code-name">.icon-icon-test5</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test6"></span>
                        <div class="name">credits</div>
                        <div class="code-name">.icon-icon-test6</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test7"></span>
                        <div class="name">renew</div>
                        <div class="code-name">.icon-icon-test7</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test8"></span>
                        <div class="name">order</div>
                        <div class="code-name">.icon-icon-test8</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test9"></span>
                        <div class="name">order_unread</div>
                        <div class="code-name">.icon-icon-test9</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test10"></span>
                        <div class="name">cart_empty</div>
                        <div class="code-name">.icon-icon-test10</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test11"></span>
                        <div class="name">cart</div>
                        <div class="code-name">.icon-icon-test11</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test12"></span>
                        <div class="name">search</div>
                        <div class="code-name">.icon-icon-test12</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test13"></span>
                        <div class="name">edit</div>
                        <div class="code-name">.icon-icon-test13</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test14"></span>
                        <div class="name">link</div>
                        <div class="code-name">.icon-icon-test14</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test15"></span>
                        <div class="name">share</div>
                        <div class="code-name">.icon-icon-test15</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test16"></span>
                        <div class="name">setting</div>
                        <div class="code-name">.icon-icon-test16</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test17"></span>
                        <div class="name">upload</div>
                        <div class="code-name">.icon-icon-test17</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test18"></span>
                        <div class="name">download</div>
                        <div class="code-name">.icon-icon-test18</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test19"></span>
                        <div class="name">play</div>
                        <div class="code-name">.icon-icon-test19</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test20"></span>
                        <div class="name">region</div>
                        <div class="code-name">.icon-icon-test20</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test21"></span>
                        <div class="name">notification</div>
                        <div class="code-name">.icon-icon-test21</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test22"></span>
                        <div class="name">notification_off</div>
                        <div class="code-name">.icon-icon-test22</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test23"></span>
                        <div class="name">phonecall</div>
                        <div class="code-name">.icon-icon-test23</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test24"></span>
                        <div class="name">phonecall_off</div>
                        <div class="code-name">.icon-icon-test24</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test25"></span>
                        <div class="name">lock</div>
                        <div class="code-name">.icon-icon-test25</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test26"></span>
                        <div class="name">unlock</div>
                        <div class="code-name">.icon-icon-test26</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test27"></span>
                        <div class="name">ET</div>
                        <div class="code-name">.icon-icon-test27</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test28"></span>
                        <div class="name">flow</div>
                        <div class="code-name">.icon-icon-test28</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test29"></span>
                        <div class="name">filter</div>
                        <div class="code-name">.icon-icon-test29</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test30"></span>
                        <div class="name">image</div>
                        <div class="code-name">.icon-icon-test30</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test31"></span>
                        <div class="name">email</div>
                        <div class="code-name">.icon-icon-test31</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test32"></span>
                        <div class="name">copy</div>
                        <div class="code-name">.icon-icon-test32</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test33"></span>
                        <div class="name">user</div>
                        <div class="code-name">.icon-icon-test33</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test34"></span>
                        <div class="name">customer_service</div>
                        <div class="code-name">.icon-icon-test34</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test35"></span>
                        <div class="name">sub_account</div>
                        <div class="code-name">.icon-icon-test35</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test36"></span>
                        <div class="name">partner</div>
                        <div class="code-name">.icon-icon-test36</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test37"></span>
                        <div class="name">list</div>
                        <div class="code-name">.icon-icon-test37</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test38"></span>
                        <div class="name">international</div>
                        <div class="code-name">.icon-icon-test38</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test39"></span>
                        <div class="name">refresh</div>
                        <div class="code-name">.icon-icon-test39</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test40"></span>
                        <div class="name">close_filled</div>
                        <div class="code-name">.icon-icon-test40</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test41"></span>
                        <div class="name">check</div>
                        <div class="code-name">.icon-icon-test41</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test42"></span>
                        <div class="name">close</div>
                        <div class="code-name">.icon-icon-test42</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test43"></span>
                        <div class="name">check_filled</div>
                        <div class="code-name">.icon-icon-test43</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test44"></span>
                        <div class="name">forbidden</div>
                        <div class="code-name">.icon-icon-test44</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test45"></span>
                        <div class="name">forbidden_filled</div>
                        <div class="code-name">.icon-icon-test45</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test46"></span>
                        <div class="name">info_filled</div>
                        <div class="code-name">.icon-icon-test46</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test47"></span>
                        <div class="name">info</div>
                        <div class="code-name">.icon-icon-test47</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test48"></span>
                        <div class="name">help_filled</div>
                        <div class="code-name">.icon-icon-test48</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test49"></span>
                        <div class="name">help</div>
                        <div class="code-name">.icon-icon-test49</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test50"></span>
                        <div class="name">caution</div>
                        <div class="code-name">.icon-icon-test50</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test51"></span>
                        <div class="name">caution_filled</div>
                        <div class="code-name">.icon-icon-test51</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test52"></span>
                        <div class="name">like</div>
                        <div class="code-name">.icon-icon-test52</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test53"></span>
                        <div class="name">like_filled</div>
                        <div class="code-name">.icon-icon-test53</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test54"></span>
                        <div class="name">star</div>
                        <div class="code-name">.icon-icon-test54</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test55"></span>
                        <div class="name">star_filled</div>
                        <div class="code-name">.icon-icon-test55</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test56"></span>
                        <div class="name">social_sina</div>
                        <div class="code-name">.icon-icon-test56</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test57"></span>
                        <div class="name">social_github</div>
                        <div class="code-name">.icon-icon-test57</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test58"></span>
                        <div class="name">applets</div>
                        <div class="code-name">.icon-icon-test58</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test59"></span>
                        <div class="name">social_wechat</div>
                        <div class="code-name">.icon-icon-test59</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test60"></span>
                        <div class="name">social_server_fault</div>
                        <div class="code-name">.icon-icon-test60</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-icon-test61"></span>
                        <div class="name">benefits</div>
                        <div class="code-name">.icon-icon-test61</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-NEW-copy"></span>
                        <div class="name">NEW</div>
                        <div class="code-name">.icon-NEW-copy</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-HOT-copy"></span>
                        <div class="name">HOT</div>
                        <div class="code-name">.icon-HOT-copy</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-home"></span>
                        <div class="name">home</div>
                        <div class="code-name">.icon-home</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-alipay"></span>
                        <div class="name">alipay</div>
                        <div class="code-name">.icon-alipay</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-taobao"></span>
                        <div class="name">taobao</div>
                        <div class="code-name">.icon-taobao</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-monitoring"></span>
                        <div class="name">monitoring</div>
                        <div class="code-name">.icon-monitoring</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-diagnose"></span>
                        <div class="name">diagnose</div>
                        <div class="code-name">.icon-diagnose</div>
                    </li>

                    <li class="dib">
                        <span class="icon iconfont icon-loading"></span>
                        <div class="name">loading</div>
                        <div class="code-name">.icon-loading</div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {};
</script>

<style scoped>
.dib {
    display:inline-block;
    *display:inline;
    *zoom:1
}
.icon_lists {
    width: 100% !important;
    overflow: hidden;
    *zoom: 1;
}

.icon_lists li {
    width: 100px;
    margin-bottom: 10px;
    text-align: center;
    list-style: none !important;
    cursor: default;
}

.icon_lists li .code-name {
    line-height: 1.2;
}

.icon_lists .icon {
    display: block;
    height: 100px;
    line-height: 100px;
    font-size: 32px;
    margin: 10px auto;
    color: #333;
    -webkit-transition: font-size 0.25s linear, width 0.25s linear;
    -moz-transition: font-size 0.25s linear, width 0.25s linear;
    transition: font-size 0.25s linear, width 0.25s linear;
}

.icon_lists .icon:hover {
    font-size: 100px;
}
</style>